import {FC} from 'react'
import Heard from '../../compents/Heard/Heard.tsx'
import { rangeValidator } from './validators';
import { Button,  Form, Input,InputNumber,Row,Col } from 'antd';
const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};
const validateMessages = {
  required: '${label} is required!',
  types: {
    email: '${label} is not a valid email!',
    number: '${label} is not a valid number!',
  },
  number: {
    range: '${label} must be between ${min} and ${max}',
  },
};
const onFinish = (values: any) => {
  console.log(values);
};
const ShuJuLuRu: FC = () => {
  const [form] = Form.useForm();
  const onChange= (): void => {
    const allValues = form.getFieldsValue();
    console.log('当前表单值:', allValues);
  }
  return (
      <div>
        <Heard/>

        <Form
            {...layout}
            name="nest-messages"
            onFinish={onFinish}
            validateMessages={validateMessages}
            form={form}
        >
          <Row justify="start" align="top" style={{border:'1px solid red'}}>
            <Col span={6}>
              <Form.Item name={['user', 'name']} label="Name" rules={[
                  { required: true }, rangeValidator() ]}>
                <Input onChange={onChange} />
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item name={['user', 'email']} label="Email" rules={[{ type: 'email' }]}>
                <Input />
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item name={['user', 'age']} label="Age" rules={[{ type: 'number', min: 0, max: 99 }]}>
                <InputNumber />
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item name={['user', 'website']} label="Website">
                <Input />
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item name={['user', 'introduction']} label="Introduction">
                <Input.TextArea />
              </Form.Item>
            </Col>
          </Row>
          <Form.Item label={null}>
            <Button type="primary" htmlType="submit">
              Submit
            </Button>
          </Form.Item>
        </Form>

      </div>
  )
}
export default ShuJuLuRu
